<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			body{
				width: 100%;
				height: 100%;
			}
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 100%;
				height: 100%;
			}
			.web{
				width: 100%;
				height: 50px;
				background: #282828;
			}
			.bg{
				width: 100%;
				height: 100%;
			}
			button{
				height: 100%;
				width: 52px;
				border-right: 1px solid #222;
				border-top: 1px solid #282828;
				border-left: 1px solid #282828;
				border-bottom: 1px solid #282828;
				background: #282828;
				color: #FFFFFF;
				font-size: 20px;
			}
			
			.cell{
				width: 260px;
				height: 600px;
				background: #282828;
				border-top: 1px solid #222222;
			}
			/*进来*/
			.bg-enter{
				width: 0;
				/*height: 0;*/
				background: black;
				/*transition: translateX(-100%);*/
			}
			.bg-enter-active{
				background: #282828;
				transition: all 1s; 
				/*width: 400px;
				height: 400px;*/
			}
			.bg-enter-to{
				background: #282828;
				/*width: 200px;
				width: 200px;*/
			}
			/*离开*/
			/*.bg-leave{
				background: yellowgreen;
			}
			.bg-leave-active{
				background: royalblue;
				transition: all 5s; 
			}
			.bg-leave-to{
				background: salmon;
				width: 0;
			}*/
			
		</style>
	</head>
	<body>
		<div id="box">
			
		
			<div id="app">
				<div class="web">
					<button @click="change">三</button>
				</div>
				
				
				<transition name="bg">
					
					<div class="cell" v-if="show">
					
					</div>
				</transition>
				
				
				
			</div>
		</div>
		
		
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			new Vue({
				el:"#app",
				data:{
					show:false
				},
				methods:{
					bE(){
						
					},
					eE(){
					
					},
					aE(){
						
					},
					Ec(){
						
					}
				},
				methods:{
					change(){
						this.show = !this.show;
					}
				}
			})
		</script>
	</body>
</html>
